<template>
  <div class="info-container">
    <div class="avatar">
      <img src="https://img2.baidu.com/it/u=785981561,1793614883&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=749" alt="">
    </div>
    <h3 class="person-name">胡歌</h3>
    <h4 class="person-post">社团联宣传部——部长</h4>
    <div class="person-jurisdiction flex items-center justify-between">
      <el-rate v-model="value2" :colors="colors" size="large" disabled />
      <span> | </span>

      <el-tooltip content="五角星的个数代表权限等级，五角星越多权限越高。" placement="bottom" effect="light">
        <svg-icon icon-class="person-info-1" class="svg-icon" />
      </el-tooltip>
    </div>
    <div class="info-details flex flex-column  ">
      <div class="info-item">
        <div class="item-name">学院</div>
        <div class="item-content">计算机科学学院</div>
      </div>
      <div class="info-item">
        <div class="item-name">专业年级</div>
        <div class="item-content">电子与计算机工程2019级</div>
      </div>
      <div class="info-item">
        <div class="item-name">联系电话</div>
        <div class="item-content">+19982544309</div>
      </div>
      <div class="info-item">
        <div class="item-name">参与社团</div>
        <div class="item-content">足球协会、社团联宣传部、社团联羽毛球协会</div>
      </div>

    </div>
    <div class="recent-activities">
      <div class="item-name">
        近期参加的活动
      </div>
      <div class="recent-charts">
        <ActivityChart />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ActivityChart from './activityCharts.vue'

const value2 = ref(5)
const colors = ref(['#99A9BF', '#47E29A', '#2FC0B5']) 
</script>

<style scoped lang="scss">
.info-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 14rem 2.5rem 2.5rem 2.5rem 23rem auto;
  gap: 0.5rem 0;
  overflow: hidden;

  .avatar {
    justify-self: center;
    align-self: center;

    img {
      width: 12rem;
      height: 12rem;
      border-radius: 100%;

    }
  }

  .person-name {
    justify-self: center;
    align-self: center;
    font-size: 2.5rem;
  }

  .person-post {
    justify-self: center;
  }

  .person-jurisdiction {
    justify-self: center;
    align-self: center;
    width: 18rem;

    span {
      color: #ccc;
    }

    .svg-icon {
      cursor: pointer;
    }
  }

  .info-details {
    padding: 1rem 0 0 2rem;

    .info-item {
      margin-bottom: 0.5rem;

      .item-content {
        font-size: 14px;
        color: #aaa;
      }
    }

  }

  .recent-activities {
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    .recent-charts {
      flex: 1;
      width: 100%;
    }
  }

  .item-name {
    font-weight: 700;
    font-size: 14px;
    font-style: italic;
    color: #555;
  }

}
</style>